<template>
  <div>
    <div v-if="options">
      <pre><code class="scss" v-text="options.code"></code></pre>
    </div>
    <div class="input-wrapper">
      <button @click="onCopy" class="btn">Copy</button>
    </div>
  </div>
</template>

<script>
import "highlight.js/styles/nnfx-light.css";
import hljs from "highlight.js";
import Clipboard from "clipboard";
export default {
  name: "Code",
  props: {
    options: {
      type: Object,
      default: {}
    },
    onClose: {
      type: Function,
      default: null
    }
  },
  data() {
    return {};
  },
  watch: {},
  mounted() {
    hljs.configure({
      languages: "scss"
    });
    hljs.highlightAll();
  },
  methods: {
    onCopy() {
      let code = this.options.code;
      let clipboard = new Clipboard(`.btn`, {
        text() {
          return code;
        }
      });
      clipboard.on("success", e => {
        clipboard.destroy();
        this.onClose();
      });
    }
  }
};
</script>

<style scoped lang="scss">
code{
  max-height: 300px;
}
.input-wrapper {
  font-family: "Oswald";
  margin-top: 20px;
  button {
    width: 100%;
    margin-top: 0;
    display: block;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.5px;
    height: 42px;
    border-radius: 6px;
    background-color: rgb(169, 80, 172);
    outline: none;
    border: 0;
    font-family: "Oswald";
    transition: 0.3s all;
    &:active {
      transform: scale(1.01);
    }
  }
}
</style>
